<template>
    <div id="app">
        <a-modal v-model:visible="visable" :title="title" :mask-closable="false" :width="600" @ok="doSubmit"
            @cancel="close">
            <a-form ref="appForm" :model="formData" :rules="formRule" :label-col-props="{ span: 6 }" layout="vertical">
                <a-row :gutter="8">
                    <a-col :span="12">
                        <a-form-item label="菜单名称" label-position="top" field="name">
                            <a-input v-model="formData.name" placeholder="请输入菜单名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="上级节点" label-position="top" field="parentId">
                            <!-- <a-cascader :options="mList" v-model="parentIds" changeOnSelect
                                @change="setParentId()"></a-cascader> -->
                            <!-- <a-cascader ref="refHandle" :options="mList" :props="{ checkStrictly: true }"
                                @change="setParentId" :style="{ width: '320px' }" v-model="parentIds" /> -->

                            <a-cascader :options="mList" :style="{ width: '320px' }"  v-model="formData.parentId" @change="setParentId"
                                placeholder="请选择所在节点" check-strictly />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="8">
                    <a-col :span="12">
                        <a-form-item label="文件路径" label-position="top" field="path">
                            <a-input v-model="formData.path" placeholder="setting/admin/index" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="权限规则" label-position="top" field="authorize">
                            <a-input v-model="formData.authorize" placeholder="setting:admin:index" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="4">
                        <a-form-item label="排序" label-position="top" field="sort">
                            <a-input-number :style="{ width: '100%' }" v-model="formData.sort"></a-input-number>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="8">
                    <a-col :span="9">
                        <a-form-item label="图标" label-position="top" field="icon">
                            <a-input v-model="formData.icon" placeholder="icon-plus" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="7">
                        <a-form-item label="菜单类型" label-position="top" field="isButton">
                            <a-radio-group button-style="solid" v-model="formData.isButton">
                                <a-radio :value="0" :true-value="0">菜单</a-radio>
                                <a-radio :value="1" :false-value="1">按钮</a-radio>
                            </a-radio-group>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="状态" label-position="top" field="isShow">
                            <a-radio-group button-style="solid" v-model="formData.isShow">
                                <a-radio :value="1" :true-value="1">显示</a-radio>
                                <a-radio :value="0" :false-value="0">不显示</a-radio>
                            </a-radio-group>

                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <!-- <div class="demo-drawer-footer">
                <a-button style="margin-right: 8px" @click="close">取消</a-button>
                <a-button type="primary" @click="doSubmit">确认提交</a-button>
            </div> -->
        </a-modal>
    </div>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import utils from '@/utils/utils';
import request from '@/config/request';
import { valueToNode } from '@babel/types';
export default {
    name: "menuAdd",
    setup(props, { emit }) {
        const appForm = ref();
        const visable = ref(false);
        const title = ref("添加菜单");
        const mList = ref();
        const parentIds = ref([]);
        const formData = ref({
            menuId: '',
            name: '',
            parentId: 0,
            icon: '',
            path: '',
            authorize: '',
            isMenu: 1,
            isButton: 0,
            isShow: 1,
            sort: 0,
            grouping: '',
        });
        const formRule = ref({
            name: [
                { required: true, message: '请输入名称' }
            ],
            parentId: [
                { required: true, type: 'number', min: 0, message: '请选择挂载节点' }
            ]
        } as any);
        const show = () => {
            if (props.pid) {
               formData.value.parentId = props.pid;
            } 
            visable.value = true;
        };

        const close = () => {
            visable.value = false;
            appForm.value.resetFields();
            emit('close');
        };

        // const getParentIds = (pid: any) => {
        //     function findMenuIds(menuList: any[], pid: any) {
        //         let ids = [];
        //         let obj = findMenuId(menuList, pid);
        //         ids.push(obj.menuId);
        //         while (obj.parentId > 0) {
        //             obj = findMenuId(menuList, obj.parentId)
        //             ids.push(obj.menuId);
        //         }
        //         return ids;
        //     }
        //     function findMenuId(menuList: any[], pid: any) {
        //         let res = [];
        //         for (let i = 0; i < menuList.length; i++) {
        //             let x = menuList[i];
        //             if (x.menuId == pid) {
        //                 res = x;
        //                 break;
        //             } else {
        //                 if (x.children && x.children.length > 0) {
        //                     res = findMenuId(x.children, pid);
        //                     if (res != null) {
        //                         break;
        //                     }
        //                 }
        //             }
        //         }
        //         return res;
        //     }
        //     parentIds.value = findMenuIds(mList.value, pid).reverse();
        // };

        const setParentId = (value: any) => {
            formData.value.parentId = value;
        };
        const doSubmit = () => {
            return new Promise(resolve => {
                appForm.value.validate().then((err: any) => {
                    if (err) {
                        resolve(false); return;
                    }
                    // utils.loading();
                    formData.value.grouping = props.group;
                    request.post('/platform/menu/save', formData.value).then((ret: any) => {
                        if (ret.code == 200) {
                            resolve(true);
                            close();
                            emit('success');
                            utils.success('操作成功！');
                        }
                        resolve(false);
                    }).catch(() => {
                        resolve(false);
                        // loading.value = false;
                    })
                })
            })
        };
        return { visable, appForm, title, parentIds, formData, formRule, mList, show, close, doSubmit, setParentId };
    },
    watch: {
        form(val) {
            this.$nextTick(() => {
                this.appForm.resetFields();
                this.parentIds = [];
                if (!val) {
                    this.formData.menuId = '';
                    this.title = '添加菜单';
                    return;
                }
                this.title = '修改菜单';
                this.formData = JSON.parse(JSON.stringify(val));
                // this.getParentIds(this.formData.parentId);
            })
        },
        pid(val) {
            if (val) {
                this.formData.parentId = val;
            } else {
                this.formData.parentId = 0;
            }
            // this.getParentIds(val);
        },
        menuList(val) {
            let first = [{ label: '作为一级菜单', value: '0', menuId: 0 }];
            let merge = first.concat(val);
            return this.mList = merge;
        }
    },
    props: {
        form: {
            type: Object,
            default: () => { return; }
        },
        group: {
            type: String,
            default: () => { return ""; }
        },
        pid: {
            type: Number,
            default: 0,
        },
        menuList: {
            type: Object,
            default: () => { return []; }
        }
    }
}
</script>

<style scoped>
.demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 9;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
</style>
